Ext.define('Ext.ux.JSONEditor', {
    extend: 'Ext.container.Container',
    alias: 'widget.jsoneditor',
    initComponent: function() {
        this.callParent(arguments);
        this.on('afterrender', function() {
            var json = {
                "array": [1, 2, 3],
                "boolean": true,
                "null": null,
                "number": 123,
                "object": {"a": "b", "c": "d"},
                "string": "Hello World"
            };
            console.log(this.getEl());
            this.editor = new JSONEditor(this.getEl(), this.CKConfig, json);
            this.editorId = this.editor.id;
        }, this);
    },
    onRender: function(ct, position) {
        if (!this.el) {
            this.defaultAutoCreate = {
                tag: 'textarea',
                autocomplete: 'off'
            };
        }
        this.callParent(arguments)
    },

    setValue: function(value) {
        this.callParent(arguments);
        if (this.editor) {
            this.editor.setData(value);
        }
    },
    getRawValue: function() {
        if (this.editor) {
            return this.editor.getData()
        } else {
            return ''
        }
    }

});